<template>
  <div>
    <div class="banner_off">
      <p>给我们留言</p>
      <p @click="$router.push('/')">关闭</p>
    </div>
    <div>
      很抱歉，暂时无法提供服务
    </div>
    <div>
      <van-form @submit="onSubmit">
        <van-field v-model="username" name="手机" label="手机" placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]" />
        <van-field v-model="password" type="text" name="留言内容" label="留言" placeholder="留言"
          :rules="[{ required: true, message: '请填写内容' }]" />
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">提交</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import { Field, Form, button } from 'vant';
export default {
  components: {
    [Field.name]: Field,
    [Form.name]: Form,
    [button.name]: button,
  },
  data () {
    return {
      username: '',
      password: '',
    };
  },
  methods: {
    onSubmit (values) {
      console.log('submit', values);
    },
  },

}
</script>

<style>
.banner_off {
  box-sizing: border-box;
  width: 100%;
  height: 1rem;
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.4rem;
  padding-left: 0.266667rem;
  padding-right: 0.266667rem;
  background: blue;
}
</style>